/**
 * Created by johnson on 17/10/11.
 */
;
(function($,window,document,undefined) {
    $.fn.dragLayout = function(options) {
        var defaults = {
            grid:undefined,
            $grid:$('.grid'),
            urlModules: [],
        };
        var settings = $.extend(defaults, options);
        var generateElements = function() {
            console.log(settings.urlModules);
            var ret;
            ret = [];
            $.each(settings.urlModules, function(index, value) {
                var contentDiv, editDiv, formGroup1, formGroup2, formGroup3, formGroup4, height, innerDiv, label1, label2, label3, label4, myInput_1, myInput_2, myInput_3, myInput_4, myInput_5, outerDiv, saveBtn, stuffDiv, width;
                width = ("" + value.width).replace('%', '');
                height = ("" + value.height).replace('px', '');
                contentDiv = document.createElement('iframe');
                contentDiv.setAttribute('class', 'myiframe');
                contentDiv.setAttribute('style', 'height:' + value.height);
                contentDiv.setAttribute('src', value.url);
                editDiv = document.createElement("div");
                editDiv.setAttribute('class', 'edit-container');
                formGroup1 = document.createElement("div");
                formGroup1.setAttribute('class', 'form-group');
                label1 = document.createElement("label");
                label1.innerHTML = '宽度';
                myInput_1 = document.createElement("input");
                myInput_1.setAttribute('class', 'input_width');
                myInput_1.setAttribute('type', 'text');
                myInput_1.setAttribute('value', width);
                formGroup1.appendChild(label1);
                formGroup1.appendChild(myInput_1);
                formGroup2 = document.createElement("div");
                formGroup2.setAttribute('class', 'form-group');
                label2 = document.createElement("label");
                label2.innerHTML = '高度';
                myInput_2 = document.createElement("input");
                myInput_2.setAttribute('class', 'input_height');
                myInput_2.setAttribute('type', 'text');
                myInput_2.setAttribute('value', height);
                formGroup2.appendChild(label2);
                formGroup2.appendChild(myInput_2);
                formGroup3 = document.createElement("div");
                formGroup3.setAttribute('class', 'form-group');
                label3 = document.createElement("label");
                label3.innerHTML = '标题';
                myInput_3 = document.createElement("input");
                myInput_3.setAttribute('type', 'text');
                myInput_3.setAttribute('value', value.title);
                formGroup3.appendChild(label3);
                formGroup3.appendChild(myInput_3);
                formGroup4 = document.createElement("div");
                formGroup4.setAttribute('class', 'form-group');
                label4 = document.createElement("label");
                label4.innerHTML = 'URL';
                myInput_4 = document.createElement("input");
                myInput_4.setAttribute('type', 'text');
                myInput_4.setAttribute('value', value.url);
                formGroup4.appendChild(label4);
                formGroup4.appendChild(myInput_4);
                myInput_5 = document.createElement("input");
                myInput_5.setAttribute('class', 'hidden');
                myInput_5.setAttribute('type', 'text');
                myInput_5.setAttribute('value', value.order);
                saveBtn = document.createElement("button");
                saveBtn.setAttribute('class', 'input_save btn btn-primary btn-w-md');
                saveBtn.innerText = '保存';
                editDiv.appendChild(formGroup1);
                editDiv.appendChild(formGroup2);
                editDiv.appendChild(formGroup3);
                editDiv.appendChild(formGroup4);
                editDiv.appendChild(myInput_5);
                editDiv.appendChild(saveBtn);
                var adminRemoveBtn = document.createElement("button");
                adminRemoveBtn.setAttribute('class', 'admin-remove btn btn-primary btn-w-md');
                // adminRemoveBtn.innerText = '删除';
                var adminEditBtn = document.createElement("button");
                adminEditBtn.setAttribute('class', 'admin-edit btn btn-primary btn-w-md');
                // adminEditBtn.innerText = '编辑';
                stuffDiv = document.createElement('div');
                stuffDiv.setAttribute('class', 'item-stuff');
                stuffDiv.innerText=value.title;
                if (value.titleStyle){
                    $(stuffDiv).css(value.titleStyle);
                }
                stuffDiv.appendChild(adminRemoveBtn);
                stuffDiv.appendChild(adminEditBtn);
                var removeFunc=function(){
                    value.removeFunc(arguments.callee.obj);
                }
                var editFunc=function(){
                    value.editFunc(arguments.callee.obj);
                }
                removeFunc.obj=value;
                editFunc.obj=value;
                $(adminEditBtn).on('click',editFunc);
                $(adminRemoveBtn).on('click',removeFunc);
                innerDiv = document.createElement('div');
                innerDiv.setAttribute('class', 'item-content');
                innerDiv.appendChild(stuffDiv);
                innerDiv.appendChild(contentDiv);
                innerDiv.appendChild(editDiv);
                $(editDiv).hide();
                outerDiv = document.createElement('div');
                outerDiv.setAttribute('class', 'item');
                height = parseInt((""+value.height).split("px")[0]);
                if (!(value != null ? value.containerStyle : void 0)) {
                    value.containerStyle = {};
                }
                if (value.containerStyle.border){
                    height =height+parseInt(value.containerStyle.border.split("px")[0])*2;
                }
                if (eval((""+value.hideTitle).toLowerCase())) {
                    stuffDiv.setAttribute('style',"border:1px dashed red;position:absolute;opacity:.5;");
                }else {
                    height = parseInt(height)+44;
                }
                value.containerStyle.width = 99.9 * parseInt(("" + value.width).split("%")[0]) / 100 + "%";
                value.containerStyle.height = height + 'px';
                value.containerStyle.background = '#fff';
                $(outerDiv).css(value.containerStyle);
                outerDiv.appendChild(innerDiv);
                ret.push(outerDiv);
            });
            return ret;
        };
        this.init = function(dragendFunc) {
            var dragCounter;
            var $root = this;
            console.log($root)
            if (!settings.grid) {
                dragCounter = 0;
                settings.grid = new Muuri({
                    container: settings.$grid.get(0),
                    items: generateElements(),
                    dragEnabled: true,
                    dragReleaseEasing: 'ease-in',
                    dragContainer: this[0]
                });
                top.grid = settings.grid;
                settings.grid.on('dragstart', function() {
                    ++dragCounter;
                    return $root.addClass('dragging');
                }).on('dragend', function() {
                    if (--dragCounter < 1) {
                        $root.removeClass('dragging');
                        return
                    }
                }).on('releaseend', function() {
                        dragendFunc(save());
                        return
                });
            }
            refresh()
            layout()
        };
        refresh = function() {
            console.log("refresh");
            settings.grid.refresh();
        };
        layout = function () {
            console.log("xxxlayout");
            settings.grid.layout(function () {
                console.log("layout");
            });
        }
        this.destroy = function() {
            console.log("destroy");
            if (settings.grid) {
                settings.grid.destroy();
                settings.$grid.empty();
                settings.grid = null;
            }
        };

        save = function() {
            var tmp, tmpModules, yyy, zzz;
            tmp = [];
            _.each($(".item"), function(item) {
                var h, order, title, translateX, translateY, translates, url, w;
                w = $($(item).find("input")[0]).val();
                h = $($(item).find("input")[1]).val();
                title = $($(item).find("input")[2]).val();
                url = $($(item).find("input")[3]).val();
                order = $($(item).find("input")[4]).val();
                translates = $(item).css("transform");
                translateX = parseFloat(translates.substring(7).split(',')[4]);
                translateY = parseFloat(translates.substring(7).split(',')[5]);
                return tmp.push({
                    order: order,
                    x: translateX,
                    y: translateY,
                    w: w + "%",
                    h: h + "px",
                    title: title,
                    url: url
                });
            });
            yyy = _.groupBy(tmp, function(item) {
                return item.y;
            });
            zzz = [];
            _.each(yyy, function(group) {
                var xxx;
                xxx = _.sortBy(group, function(item) {
                    return item.x;
                });
                return zzz = zzz.concat(xxx);
            });
            tmpModules = [];
            _.each(zzz, function(item, index) {
                tmpModules.push(settings.urlModules[parseInt(item.order)]);
                tmpModules[index].order = index;
                tmpModules[index].width = item.w;
                tmpModules[index].height = item.h;
                tmpModules[index].title = item.title;
                return tmpModules[index].url = item.url;
            });
            console.log(tmpModules);
            return tmpModules;
        };
        return this;
    }
})(jQuery,window,document)